<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .d1{
                width: 300px;
                height: 300px;
                background-color: antiquewhite;
                padding: 20px;
                border: 20px solid #ddd;
                box-sizing: content-box;
                margin: 0 auto;
            }
            .d2{
                width: 300px;
                height: 300px;
                background-color: skyblue;
                padding: 20px;
                border: 20px solid #ccc;
                margin: 0 auto;
                box-sizing: border-box;
            }
            /* border-box:把padding和border的宽高都算在元素内。
            content-box:默认属性，元素的宽高等于元素加上padding和border的宽高。 */

        </style>
    </head>
    <body>
        <div class="d1"></div>
        <div class="d2"></div>
    </body>
</html>